<template>
  <div class="cjui-divider">
    <div class="cjui-divider--left-line" :style="leftlineStyle"></div>
    <div :class="['cjui-divider--text', `is-${contentPosition}`, `is-${contentMargin}`]">
      <slot></slot>
    </div>
    <div class="cjui-divider--right-line" :style="rightlineStyle"></div>
  </div>
</template>

<script lang="ts">
import { computed, toRefs } from 'vue';

export default {
  name: 'CjuiDivider',
  props: {
    contentPosition: {
      type: String,
      default: 'left'  // left | right | center
    },
    contentMargin: {
      type: String,
      default: '2em'
    }
  },
  setup(props) {
    const  { contentPosition, contentMargin } = toRefs(props);

    const leftlineStyle = computed(() => {
      return contentPosition.value === 'left' ? 
        {
          width: contentMargin.value,
        } 
        : 
        { 
          flex: 1 
        }
    });

    const rightlineStyle = computed(() => {
      return contentPosition.value === 'right' ? 
        {
          width: contentMargin.value,
        } 
        : 
        { 
          flex: 1 
        }
    });

    return {
      leftlineStyle,
      rightlineStyle
    }
  }
}
</script>

<style lang="scss">
.cjui-divider {
  display: flex;
  align-items: center;
  margin: 0.5em 0;
}

.cjui-divider--left-line,
.cjui-divider--right-line {
  height: 1px;
  display: inline-block;
  margin-top: 0.25em;
  border-top: 1px solid var(--el-border-color);
}
.cjui-divider--text {
  color: #d5d5d5;
  font-weight: 300;
  margin: 0 0.5em;

  &.is-left.is-0 {
    margin-left: 0;
  }

  &.is-right.is-0 {
    margin-right: 0;
  }
}
</style>